<template>
	<view class="service_management_box">
		<scroll-view scroll-y class="service_list">
			<view class="service_item_box" v-for="(item, index) in serviceList" :key="index">
				<view class="service_title">
					<view class="service_title_content">
						<image class="service_picture" :src="item.goods.thumPic"></image>
						<view class="service_name">{{item.goods.name}}</view>
					</view>
					<view :class="item.status == 1 ? 'service_status_selling':'service_status_unavailable'">{{item.status == 1 ? '上架中':'已下架'}}</view>
				</view>
				<view class="item_content">
					<view class="table_box">
						<view class="table_tr table_th">
							<view class="table_tb"></view>
							<view class="table_tb">{{parseJSON(item.petRangeMarkUp).startValue}}km内、{{parseJSON(item.petNumMarkUp).startValue}}只宠物</view>
						</view>
						<!-- <view class="table_tr">
							<view class="table_tb">上门费</view>
							<view class="table_tb">{{(item.skuList[0] && item.skuList[0].price) || 0}}</view>
							<view class="table_tb">{{parseJSON(item.petRangeMarkUp).upPrice || 0}}</view>
						</view> -->
						<view class="table_tr" v-for="skuItem in item.skuList"  :key="skuItem.id">
							<view class="table_tb">{{skuItem.serviceTime}}</view>
							<view class="table_tb">¥{{Number(skuItem.price)}}</view>
						</view>
					</view>
					<view class="table_box">
						<view class="table_tr table_th">
							<view class="table_tb"></view>
							<view class="table_tb">超出{{parseJSON(item.petRangeMarkUp).startValue}}km｜每多{{parseJSON(item.petRangeMarkUp).outValue || 0}}km</view>
							<view class="table_tb">超出{{parseJSON(item.petNumMarkUp).startValue}}只｜每多{{parseJSON(item.petNumMarkUp).outValue || 0}}只</view>
						</view>
						<view class="table_tr" >
							<view class="table_tb">加价费</view>
							<view class="table_tb">¥{{parseJSON(item.petRangeMarkUp).upPrice || 0}}</view>
							<view class="table_tb">¥{{parseJSON(item.petNumMarkUp).upPrice || 0}}</view>
						</view>
					</view>
				</view>
				<view class="item_button_box">
					<view class="button_box" v-if="item.status == 1" @tap="modifyServiceStatus(item)">
						<image src="https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-56.png" class="button_icon"></image>
						<view class="button_text">下架</view>
					</view>
					<view class="button_box" v-if="item.status == 2" @tap="modifyServiceStatus(item)">
						<image src="https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-55.png" class="button_icon"></image>
						<view class="button_text">上架</view>
					</view>
					<view class="button_box" @tap="deleteService(item)">
						<image src="https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-08.png" class="button_icon"></image>
						<view class="button_text">删除</view>
					</view>
					<view class="button_box" @tap="modifyService(item)">
						<image src="https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-05.png" class="button_icon"></image>
						<view class="button_text">修改</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="footer_box">
			<view class="footer_button" @tap="addService">添加服务</view>
		</view>
	</view>
</template>

<script setup>
	import api from '@/api'
	import { ref } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { useServiceStore } from '@/store/useServiceStore'
	
	const serviceList = ref([])
	const studioId = ref()
	
	onLoad((data) => {
		studioId.value = data.studioId
	})
	onShow(() => {
		getServiceList()
	})
	
	const getServiceList = async () => {
		const { data } = await api({
			method: 'GET',
			url: `/mall/goods/studio-goods/getGoodsByStudioId/${studioId.value}`
		})
		serviceList.value = data
	}
	// 验证是否有添加的服务
	const validateUnselectService = async () => {
		const id = studioId.value
		let { data } = await api({
			method: 'GET',
			url: `/mall/goods/studio-goods/getGoodsNotStudioId/${id || 0}`
		})
		if (!data || data.length == 0) {
			uni.showToast({
				icon: 'none',
				title: '当前没有可添加的服务'
			});
			return false
		}
		return true
	}
	const deleteService = async (data) => {
		uni.showModal({
			title: `提示`,
			content: `是否删除${data.goods.name}？`,
			cancelText: '取消',
			confirmText: '确认',
			success: async (status) => {
				if (status.cancel) return
				const res = await api({
					method: 'DELETE',
					url: `/mall/goods/studio-goods/${data.id}`
				})
				if (res.code == 0) {
					uni.showToast({
						title: '删除成功'
					});
					getServiceList()
				}
			}
		});
	}
	const modifyService = (data) => {
		useServiceStore().selectedServiceList = [data]
		uni.navigateTo({
			url: `/pages/workshopManagement/modifyService/index?type=modify&studioId=${studioId.value}&status=${data.status}`
		})
	}
	const modifyServiceStatus = (data) => {
		const text = data.status == 1?'下架':'上架'
		const serviceStatus = data.status == 1 ? 2 : 1 // 1 上架 2下架
		uni.showModal({
			title: `提示`,
			content: `是否${text}${data.goods.name}？`,
			cancelText: '取消',
			confirmText: '确认',
			success: async (status) => {
				if (status.cancel) return
				const res = await api({
					method: 'put',
					url: `/mall/goods/studio-goods/saveStatus/${data.id}/${serviceStatus}`
				})
				if (res.code == 0) {
					uni.showToast({
						title: `${text}成功`
					});
					getServiceList()
				}
			}
		});
	}
	const addService = async () => {
		const result = await validateUnselectService()
		if(!result) return
		uni.navigateTo({
			url: `/pages/workshopManagement/addService/index?studioId=${studioId.value}`
		})
	}
	const parseJSON = (json) => {
		if (!json) return {}
		try {
			const result = JSON.parse(json)
			return result
		} catch(err) {
			console.log('err', err)
			return {}
		}
	}
</script>

<style lang="scss" scoped>
	.service_management_box {
		width: 100%;
		height: 100%;
		background: #F9F6F6;
		padding: 24rpx 32rpx;
		padding-bottom: 112rpx;
		padding-bottom: calc(112rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(112rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;
		
		.service_list {
			height: 100%;
			
			.service_item_box {
				padding: 32rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				margin-bottom: 24rpx;
				
				.service_title {
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					.service_title_content {
						flex: 1;
						display: flex;
						align-items: center;
						
						.service_picture {
							width: 72rpx;
							height: 72rpx;
							border-radius: 24rpx;
							margin-right: 16rpx;
						}
						.service_name {
							flex: 1;
							font-weight: bold;
							font-size: 36rpx;
							color: #1B2120;
						}
					}
					
					.service_status_selling {
						font-size: 26rpx;
						color: #FF6084;
					}
					.service_status_unavailable {
						font-size: 26rpx;
						color: #CACCCC;
					}
				}
				
				.item_content {
					margin-top: 32rpx;
					
					.table_box {
						margin-bottom: 24rpx;
						
						.table_tr {
							display: flex;
							border-top: 1rpx solid #E4E6E6;
							
							.table_tb {
								font-weight: bold;
								font-size: 28rpx;
								color: #1B2120;
								padding: 44rpx 0;
								display: flex;
								justify-content: center;
								align-items: center;
								flex: 2;
								border-left: 1rpx solid #E4E6E6;
								box-sizing: border-box;
								text-align: center;
							}
							.table_tb:first-child {
								// flex: 1;
								flex: none;
								width: 124rpx;
								font-weight: normal;
								font-size: 26rpx;
								color: #7C807F;
							}
							.table_tb:last-child {
								flex: 4;
								border-right: 1rpx solid #E4E6E6;
							}
							.table_tb:nth-child(3) {
								flex: 2;
								border-right: 1rpx solid #E4E6E6;
							}
						}
						.table_tr:last-child {
							border-bottom: 1rpx solid #E4E6E6;
						}
						.table_th {
							.table_tb {
								font-weight: normal;
								padding: 20rpx 24rpx;
								font-size: 26rpx;
								color: #7C807F;
								box-sizing: border-box;
								text-align: center;
							}
						}
					}
				}
			
				.item_button_box {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					margin-top: 32rpx;
					
					.button_box {
						display: flex;
						align-items: center;
						margin-left: 72rpx;
						
						.button_icon {
							width: 32rpx;
							height: 32rpx;
							margin-right: 8rpx;
						}
						.button_text {
							font-size: 28rpx;
							color: #1A1A1A;
							text-decoration-line: underline;
						}
					}
				}
			}
		}
	
		.footer_box {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			box-sizing: border-box;
			background: #FFFFFF;
			border-top: 1rpx solid #E4E6E6;
			padding: 8rpx 32rpx;
			padding-bottom: calc(8rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(8rpx + env(safe-area-inset-bottom));
			
			.footer_button {
				height: 88rpx;
				background: linear-gradient( 90deg, #FF6188 0%, #FF5252 100%);
				border-radius: 62rpx;
				font-size: 28rpx;
				line-height: 88rpx;
				text-align: center;
				color: #FFFFFF;
			}
		}
	}
</style>